<template>
    <div style="background-color: rgba(3, 14, 40,1);">
        <!-- <div v-if="isShow" style="background-color: rgba(3, 14, 40,1);">
            <dapingNew v-if="rolesBoll == 1" @success1="mapFun1" />
            <configurationCopy v-if="rolesBoll == 2" @success1="mapFun2" />
            <mapStautCopy v-if="rolesBoll == 3" @success3="mapFun3" />
        </div>
        <div v-else style="background-color: rgba(3, 14, 40,1);">
            <dapingNew v-if="rolesBoll == 1" @success1="mapFun1" />
            <configuration v-if="rolesBoll == 2" @success1="mapFun2" />
            <mapStaut v-if="rolesBoll == 3" @success3="mapFun3" />
        </div> -->

        <div v-if="isShow">
            <largeScreenOne v-if="rolesBoll == 1" @success="mapFun" />
            <largeScreenTwo v-if="rolesBoll == 2" @success="mapFun" />
            <largeScreenThree v-if="rolesBoll == 3" @success="mapFun" />
        </div>
        <div v-else>
            <fitterOne v-if="rolesBoll == 1" @success="mapFun" />
            <fitterTwo v-if="rolesBoll == 2" @success="mapFun" />
            <fitterThree v-if="rolesBoll == 3" @success="mapFun" />
        </div>

    </div>

</template>

<script>
import mapOverview from './mapStaut/mapOverview.vue'
import mapStaut from './mapStaut/mapStaut.vue'
import configuration from './mapStaut/configuration.vue'
import mapOverviewCopy from './mapStaut/mapOverviewCopy.vue'
import mapStautCopy from './mapStaut/mapStautCopy.vue'
import configurationCopy from './mapStaut/configurationCopy.vue'
import dapingNew from './mapStaut/dapingNew.vue'
import largeScreenOne from './mapStaut/largeScreenOne.vue'
import largeScreenTwo from './mapStaut/largeScreenTwo.vue'
import largeScreenThree from './mapStaut/largeScreenThree.vue'
import fitterOne from './mapStaut/fitterOne.vue'
import fitterTwo from './mapStaut/fitterTwo.vue'
import fitterThree from './mapStaut/fitterThree.vue'
export default {
    name: 'Index',
    components: {
        mapStaut,
        mapOverview,
        configuration,
        mapOverviewCopy,
        mapStautCopy,
        configurationCopy,
        dapingNew,
        largeScreenOne,
        largeScreenTwo,
        largeScreenThree,
        fitterOne,
        fitterTwo,
        fitterThree,
    },
    data() {
        return {
            rolesBoll: 1,
            isShow: false,
        }
    },
    created() {
    },
    mounted() {
        this.updateScreenWidth(); // 初始化宽度

    },
    methods: {
        updateScreenWidth() {
            this.screenWidth = window.innerWidth;
            if (this.screenWidth < 2000) {
                this.isShow = true
            } else {
                this.isShow = false
            }

        },
        mapFun1(data) {

            this.rolesBoll = data.type

        },
        mapFun2(data) {

            this.rolesBoll = data.type
        },
        mapFun3(data) {

            this.rolesBoll = data.type
        },
        mapFun(data) {

            this.rolesBoll = data.type
        }
    }
}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}
</style>
